<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>您的第一次</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="assets/vendor/bootstrap-v3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/vendor/jquery-fullpage/jquery.fullpage.min.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/mui/css/mui.css">
    <link rel="stylesheet" href="assets/mui/css/icons-extra.css">
    <link rel="stylesheet" type="text/css" href="assets/mui/css/mui.picker.min.css" />
    <link rel="stylesheet" type="text/css" href="assets/mui/css/mui.dtpicker.css" />
</head>

<body style="touch-action: none;">

    <!--音频-->
    <audio id="audio" class="playing" autoplay="autoplay" loop="lopp">
        <source src="assets/bg.mp3" type="audio/mp3" />
        <embed height="100" width="100" src="assets/bg.mp3" />
    </audio>
    <a class="rotation" id="musicControl"><img src="assets/image/music.png" alt="成都" /></a>
    <!--《我的第一次》 封面-->
    <div id="main">

        <div id="coverPage" class="section">
            <div class="container">

                <div class="coverContent hidden">
                    <span class="coverTitle">集大，我的第一次</span>
                    <span class="coverText">那些年，<br />我在集美大学经历的第一次......</span>
                </div>
                <img src="assets/image/cover.png" alt="集美大学" class="coverImage hidden" />
            </div>
        </div>

        <!--开场白-->
        <div id="pg1" class="section">
            <div class="container">
                <div class="pg1Image">
                    <div class="pg1-01 hidden">
                        <img src="assets/image/pg1-02.png" alt="集大尚大楼" />
                    </div>
                </div>
                <div class="pg1Text hidden">
                    <span class="pg1Name">亲爱的<strong class="name"></strong>同学，你好！</span>
                    <span class="pg1Words">
							<strong class="pg1time"></strong>你加入了集美大学。
						</span>
                    <span class="pg1Words">白驹过隙，岁月静好，<br />可记得你在集大那些第一次？</span>
                </div>
            </div>
        </div>

        <!--一卡通校园卡-->
        <div id="pg2" class="section">
            <div class="container">
                <div class="pg2Image">
                    <div class="pg2-01 hidden">
                        <img src="assets/image/pg2-01-1.png" alt="消费种类" class="pg2-01-1 hidden" />
                        <img src="assets/image/pg2-01-2.png" alt="一卡通" class="pg2-01-2 hidden" />
                    </div>
                </div>
                <div class="pg2Text hidden">
                    <span class="pg2Intro">食堂、超市、图书馆、校车...校园卡，小小卡片发挥着大大作用。</span>
                    <span class="pg2Words">
							<strong class="pg2Time"></strong>
							，你第一次使用校园卡，在
							<strong class="location"></strong> 消费了
							<strong class="cost"></strong> 元。
						</span>
                </div>
            </div>
        </div>

        <!--图书馆-->
        <div id="pg3" class="section">
            <div class="container">
                <img src="assets/image/pg3-01.png" alt="集大图书馆" class="pg3Image hidden" />
                <div class="pg3Text hidden">
                    <span class="pg3Intro">翻一页书，粒粒阳光投泻纸上...<br />遇见一本书，邂逅一位哲人。<br /></span>
                    <span class="pg3No hidden">集大图书馆静静等候你的到来。</span>
                    <span class="pg3Library">
							<strong id="pg3Time1" class="pg3Time"></strong>
							<br />你第一次来到
							<strong class="library"></strong>
						</span>
                    <span class="pg3Book">
							<strong id="pg3Time2" class="pg3Time"></strong>
							<br />借走了第一本书：
							<strong class="book"></strong>
						</span>
                </div>
            </div>
        </div>

        <!--助学金-->
        <div id="pg4" class="section">
            <div class="container">
                <div class="pg4Image">
                    <img src="assets/image/pg4-01.png" class="pg4-01 hidden" alt="五星红旗" />
                    <img src="assets/image/pg4-02.png" class="pg4-02 hidden" alt="握手" />
                </div>
                <div class="pg4Text hidden">
                    <span class="pg4Intro">知悉了你的困难，集大努力帮助。</span>
                    <span class="pg4Help">
							<strong class="pg4Time"></strong>
							<br />你第一次获得了<br />
							<strong class="pg4HelpType"></strong>
						</span>
                </div>
            </div>
        </div>

        <!--挂科记录-->
        <div id="pg5" class="section" style="height: 682px;">
            <div class="container">
                <div style="height: 707px;">
                    <div class="pg5Image hidden">
                        <img src="assets/image/pg5-01.png" class="pg5-01" alt="第一次挂科" />
                    </div>
                    <div class="pg5Text hidden" style="height: 500px;">
                        <span class="pg5Intro">人有失足，马有失蹄。</span>
                        <span class="pg5Down">
							<strong class="pg5Time"></strong>，你第一次挂科
							<br />科目是<strong class="pg5Class"></strong>
						</span>
                    </div>

                </div>

            </div>
        </div>

        <!--结语赠言-->
        <div id="endPage" class="section">
            <div class="container">
                <img src="assets/image/endPage-01.png" alt="" class="endPageImage hidden" />
                <div class="endPageText hidden">
                    <span>原来，<br />
                    你在集大已经有了这么多第一次。<br />
                    来日方长，<br />
                    希望你和集美大学一起，<br />
                    创造出更多美好的回忆。
                </span>
                </div>
                <div class="endPageNetCenter hidden">
                    <a class="btn tologin" id="test" style="background-color:#ff8533;color:#ffffff;border-radius:4px;-webkit-border-radius:4px;border-width:1px;border-style:solid;border-color:#ffffff;font-size:1.8rem;opacity:1;; overflow:hidden;"><strong class="firstormoreup"></strong></a>
                </div>
            </div>
        </div>

        <!--分享-->
        <div id="pg7" class="section">
            <div class="container">
                <div id="cmp-71" class="cmp image " style="width:50%;height:28.746032%;left:2.6875%;top:16.285714%;z-index:0;" width="207"
                    height="202">
                    <img class="cmp-inner" src="assets/image/photo.png" style="color:black;border-radius:0;-webkit-border-radius:0;border-width:0px;border-style:solid;border-color:transparent;font-size:1rem;opacity:1;position:absolute;"
                        width="207" height="202">
                </div>
                <div id="cmp-72" class="cmp btn" style="width:85.3125%;height:7.936507936507936%;left:6.4375%;top:61.011904761904766%;z-index:0;-webkit-animation:fadeInUp 1s 0.5s 1 both;-moz-animation:fadeInUp 1s 0.5s 1 both;animation:fadeInUp 1s 0.5s 1 both;">
                    <button class="cmp-inner" id ="export" style="background-color:#ff8533;color:#ffffff;border-radius:4px;-webkit-border-radius:4px;border-width:1px;border-style:solid;border-color:#ffffff;font-size:1.8rem;opacity:1;; overflow:hidden;">分享</button>
                </div>
                <div id="cmp-73" class="cmp text " style="width:81.875%;height:auto;left:23.75%;top:45.115079%;z-index:0;">
                    <div class="cmp-inner" style="color:#666666;border-radius:0;-webkit-border-radius:0;border-width:undefinedpx;border-color:transparent;font-size:0.9rem;opacity:1;font-family:黑体;text-align:center;">
                        <div class="cmp" style="left:-7%;top:71%;">
                            <font color="#ffffff">
                                <span style="font-size: 1.8rem;">美好的回忆和朋友一起分享吧！</span>
                            </font>
                        </div>
                        <div>
                            <font color="#ffffff">
                                <span style="font-size: 1.8rem;">独乐乐，不如众乐乐~</span>
                            </font>
                        </div>
                        <div>
                            <br>
                        </div>
                    </div>
                </div>
                <div id="cmp-74" class="cmp text " style="width:81.875%;height:auto;left:9.0625%;top:73.71031746031747%;z-index:0;">
                    <div class="cmp-inner" style="color:#666666;border-radius:0;-webkit-border-radius:0;border-width:undefinedpx;border-color:transparent;font-size:0.9rem;opacity:1;font-family:黑体;line-height:1.2rem;text-align:center;">
                        <div class="pg7NetCenter hidden">
                            <span class="netText">“智慧集大”相关服务</span>
                            <a href="http://net.jmu.edu.cn/" id="netCenter">去网络中心首页看看>>></a>
                            <a class="btn tologin" href="/MyFirst/logout">切换账号</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--上传页面-->
        <div id="pg8" class="section">
            <div class="container">


                <div id="cmp-60" class="cmp btn" style="width:24.6875%;height:7.349206%;left:77.8125%;top:1.2%;z-index:1;-webkit-animation:fadeInDown 1s 0.5s 1 both;-moz-animation:fadeInDown 1s 0.5s 1 both;animation:fadeInDown 1s 0.5s 1 both;">
                    <button class="cmp-inner" id="btnUpload" style="background-color:#F28615;color:#ffffff;border-radius:4px;-webkit-border-radius:4px;border-width:1px;border-style:solid;border-color:rgba(0, 0, 0, 0);font-size:1.5rem;opacity:1;; overflow:hidden;">保存</button>
                </div>
                <div id="cmp-61" class="cmp btn" style="width:24.6875%;height:7.349206%;left:-0.5625%;top:1.2%;z-index:1;-webkit-animation:fadeInDown 1s 0.5s 1 both;-moz-animation:fadeInDown 1s 0.5s 1 both;animation:fadeInDown 1s 0.5s 1 both;">
                    <button class="cmp-inner" id="cansole" style="background-color:#A7A7A7;color:#ffffff;border-radius:4px;-webkit-border-radius:4px;border-width:1px;border-style:solid;border-color:rgba(0, 0, 0, 0);font-size:1.5rem;opacity:1;; overflow:hidden;">取消</button>
                </div>
                <form enctype="multipart/form-data" action="http://weblet.jmu.edu.cn/MyFirst/upload" id="fileupload-form" method="post" accept-charset="UTF-8">
                    <input type="hidden" name="outid" id="xuehao" value="201521122083">
                    <input type="hidden" name="firsttime" id="result2" value="2017/05/02">

                    <div id="cmp-58" class="cmp ginput" style="width:62.375%;height:6.349206349206349%;left:8.125%;top:13.583333%;z-index:0;-webkit-animation:fadeInDown 1s 0.5s 1 both;-moz-animation:fadeInDown 1s 0.5s 1 both;animation:fadeInDown 1s 0.5s 1 both;">
                        <input id="title" name="title" class="cmp-inner cmp-1496300654176" style="background-color:#fff;color:#999;border-radius:4px;-webkit-border-radius:4px;border-width:1px;border-style:solid;border-color:#e1e1e1;font-size:1.5rem;opacity:1;"
                            placeholder="标题" type="text">
                    </div>
                    <img src="" id="theImg" alt="" class="cmp shape " style="width:81.0625%;height:47.373016%;left:7.968749999999999%;top:37.714286%;z-index:0;-webkit-animation:fadeInDown 1s 0.5s 1 both;-moz-animation:fadeInDown 1s 0.5s 1 both;animation:fadeInDown 1s 0.5s 1 both;"
                        width="315" height="313">
                    <div id="cmp-59" class="cmp shape " style="width:100.3125%;height:9.920634920634921%;left:0%;top:0%;z-index:0;" width="376"
                        height="53">
                        <div class="cmp-inner" style="background-color:transparent;color:black;border-radius:0;-webkit-border-radius:0;border-width:0px;border-style:solid;border-color:transparent;font-size:1rem;opacity:1;"
                            width="376" height="53">
                            <svg version="1.2" baseProfile="tiny" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve" width="100%" height="100%" preserveAspectRatio="none">
                                <path id="XMLID_12991_" fill="#999999" d="M100,100H0V0h100V100z"></path>
                            </svg>
                        </div>
                    </div>

                    <div id="cmp-62" class="cmp gselect" style="width:68.375%;height:1.349206%;left:4.125%;top:19.707143%;;z-index:0;-webkit-animation:fadeInDown 1s 0.5s 1 both;-moz-animation:fadeInDown 1s 0.5s 1 both;animation:fadeInDown 1s 0.5s 1 both;">
                        <div class="cmp-inner">
                            <div class="mui-content-padded">
                                <button id='demo1' data-options='{"type":"date"}' class="btnTime mui-btn mui-btn-block" style="padding: 8px 0;font-size:1.5rem;opacity:1; color:#999">选择日期时间 ...</button>
                                <div id='result' class="ui-alert"></div>
                            </div>
                        </div>
                    </div>
                    <!--<input id="uploadFile" type="file" style="position:absolute;opacity:0;">-->
                    <input id="fileupload" type="file" name="file" style="position:absolute;opacity:0;">
                    <div id="cmp-63" class="cmp shape " style="width:81.0625%;height:47.373016%;left:8.96875%;top:30.714286%;z-index:0;-webkit-animation:fadeInDown 1s 0.5s 1 both;-moz-animation:fadeInDown 1s 0.5s 1 both;animation:fadeInDown 1s 0.5s 1 both;"
                        width="315" height="313">
                        <div class="cmp-inner" style="background-color:transparent;color:black;border-radius:0;-webkit-border-radius:0;border-width:0px;border-style:solid;border-color:transparent;font-size:1rem;opacity:1;"
                            width="315" height="313">
                            <!--?xml version="1.0" encoding="utf-8"?-->
                            <svg version="1.2" baseProfile="tiny" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve" width="100%" height="100%" preserveAspectRatio="none">
                                <path id="XMLID_12991_" fill="#999999" d="M100,100H0V0h100V100z"></path>
                            </svg>
                        </div>
                    </div>
                    <div id="cmp-64" class="cmp text " style="width:77.1875%;height:auto;left:37.25%;top:66.884921%;z-index:0;-webkit-animation:fadeInDown 1s 0.5s 1 both;-moz-animation:fadeInDown 1s 0.5s 1 both;animation:fadeInDown 1s 0.5s 1 both;">
                        <div class="cmp-inner" style="color:#666666;border-radius:0;-webkit-border-radius:0;border-width:undefinedpx;border-color:transparent;font-size:0.9rem;opacity:1;font-family:黑体;line-height:1.2rem;text-align:center;">
                            <div>
                                <font color="#ffffff">
                                    <span style="font-size: 1.8rem;">添加图片</span>
                                </font>
                            </div>
                            <div>
                                <br>
                            </div>
                        </div>
                    </div>
                    <div id="cmp-64_1" class="cmp text hidden" style="width:77.1875%;height:auto;left: -19.75%;top: 30.884921%;z-index:0;-webkit-animation:fadeInDown 1s 0.5s 1 both;-moz-animation:fadeInDown 1s 0.5s 1 both;animation:fadeInDown 1s 0.5s 1 both;">
                        <div class="cmp-inner" style="color:#666666;border-radius:0;-webkit-border-radius:0;border-width:undefinedpx;border-color:transparent;font-size:0.9rem;opacity:1;font-family:黑体;line-height:1.2rem;text-align:center;">
                            <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">重选图片</button>
                        </div>
                    </div>

                    <div id="cmp-65" class="cmp image " style="width:50%;height:31.746031746031743%;left:-0.6875%;top:34.543651%;z-index:0;-webkit-animation:fadeInDown 1s 0.5s 1 both;-moz-animation:fadeInDown 1s 0.5s 1 both;animation:fadeInDown 1s 0.5s 1 both;"
                        width="187" height="183">
                        <img class="cmp-inner" src="assets/image/album.png" style="color:black;border-radius:0;-webkit-border-radius:0;border-width:0px;border-style:solid;border-color:transparent;font-size:1rem;opacity:1;position:absolute;"
                            width="187" height="183">
                    </div>
                    <div id="cmp-66" class="cmp ginput" style="width:85%;height:10.119047619047619%;left:7.5%;top:87.071429%;z-index:0;-webkit-animation:fadeInDown 1s 0.5s 1 both;-moz-animation:fadeInDown 1s 0.5s 1 both;animation:fadeInDown 1s 0.5s 1 both;">
                        <input id="introduce" name="comment" class="cmp-inner cmp-1496300766739" style="background-color:#fff;color:#999;border-radius:4px;-webkit-border-radius:4px;border-width:1px;border-style:solid;border-color:#e1e1e1;font-size:0.8rem;opacity:1;"
                            placeholder="说明文字，不超过50字" type="text">
                    </div>
                    <!--<iframe name='hidden_frame' crossOrigin="Anonymous" id="hidden_frame" style='display: none'></iframe>-->
                </form>
            </div>
        </div>




    </div>
    <script src="assets/vendor/jquery-v1.11.3/jquery.min.js"></script>
    <script src="assets/vendor/bootstrap-v3.3.1/js/bootstrap.min.js"></script>
    <script src="assets/vendor/raven-v3.14.2/raven.min.js"></script>
    <script>
        Raven.config('https://607bd962a38842cca6c2697cde5e2e30@sentry.io/160185').install();
    </script>
    <script src="assets/vendor/jquery-fullpage/jquery.fullpage.min.js"></script>
    <script src="assets/mui/js/mui.min.js"></script>
    <script src="assets/mui/js/mui.picker.min.js"></script>
    <script src="assets/js/jquery.ui.widget.js"></script>
    <script src="assets/js/jquery.iframe-transport.js"></script>
    <script src="assets/js/jquery.fileupload.js"></script>
    <script src="assets/js/canvg.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
    <script src="assets/js/html2canvas.js"></script>
    <script>
        function svg2canvas(targetElem) {
            var nodesToRecover = [];
            var nodesToRemove = [];

            var svgElem = targetElem.find('svg');

            svgElem.each(function (index, node) {
                var parentNode = node.parentNode;

                var svg = node.outerHTML;

                var canvas = document.createElement('canvas');

                canvg(canvas, svg);

                nodesToRecover.push({
                    parent: parentNode,
                    child: node
                });
                parentNode.removeChild(node);

                nodesToRemove.push({
                    parent: parentNode,
                    child: canvas
                });

                parentNode.appendChild(canvas);
            });

        }

        function openWithIframe(html) {

            var iframe = document.createElement('iframe');
            iframe.setAttribute("id", "myFrmame");

            var $iframe = $(iframe);
            $iframe.css({
                'visibility': 'hidden',
                'position': 'static',
                'z-index': '4'
            }).width($(window).width()).height($(window).height());

            $('body').append(iframe);


            var ifDoc = iframe.contentWindow.document;

            　　 //这里做是将报表使用到的css重新写入到iframe中，根据自身的需要
            //   var style = "<link href='./assets/css/main.css' rel='stylesheet' type='text/css'>";



            html = "<!DOCTYPE html><html><head>" + "</head><body>" + html + "</body></html>"

            ifDoc.open();
            ifDoc.write(html);
            ifDoc.close();


            //这里做一些微调，根据自身的需要
            var fbody = $iframe.contents().find("body");

            fbody.find("#chart-center").removeAttr("width");

            fbody.find(".page-container").css("width", "370px");
            fbody.find(".center-container").css("width", "600px");

            fbody.find("#severity-chart svg").attr("width", "370");
            fbody.find("#status-chart svg").attr("width", "300");

            return fbody;
        }



        //导出pdf
        function exportAsPDF() {
            //得到要导出pdf的html根节点  
            var chartCenter = document.getElementById("endPage").outerHTML;

            var fbody = openWithIframe(chartCenter);
            //   fbody.setAttribute('crossOrigin', 'anonymous');
            svg2canvas(fbody);

            //html2canvas官网的标准方法
            html2canvas(fbody, {
                onrendered: function (canvas) {
                    //var myImage = canvas.toDataURL("image/png");
                    //alert(myImage);
                    //window.open(myImage);

                    /*
                    canvas.toBlob(function(blob) {
                      saveAs(blob, "report.png");
                    }, "image/png");
                    */

                    //将图片转换成：base64编码的jpg图片。
                    var imgData = canvas.toDataURL('image/jpeg');
                    //alert(imgData);

                    //l:横向， p：纵向
                    var doc = new jsPDF('l', 'pt', 'a3');
                    //var doc = new jsPDF('p', 'mm', [290, 210]);
                    //var doc = new jsPDF();//默认是A4，由于我的报表比较大，所以专门设置了尺寸。
                    doc.setFontSize(22);
                    doc.setFontType("bolditalic");
                    doc.text(500, 30, "Ticket Report"); //x:500, y:30

                    doc.addImage(imgData, 'jpeg', 10, 60); //写入位置：x:10, y:60

                    doc.addPage(); //新建一页

                    //   //这里就是把将table写入到pdf里面。
                    //   var res = doc.autoTableHtmlToJson(document.getElementById("tickets-summary-table"), true);
                    //   doc.autoTable(res.columns, res.data);

                    doc.save('ticket.report_' + new Date().getTime() + '.pdf');
                    $('#myFrmame').remove(); //最后将iframe删除
                },
                background: "#fff", //这里给生成的图片默认背景，不然的话，如果你的html根节点没有设置背景的话，会用黑色填充。
                allowTaint: true //避免一些不识别的图片干扰，默认为false，遇到不识别的图片干扰则会停止处理html2canvas
            });

        };
        // document.getElementById("export").onclick=function(){ 
        //     exportAsPDF();
        // }

        var first_xh = "${requestScope.V_XS_DYC.xh}"; /* 学号 */
        var first_xm = "${requestScope.V_XS_DYC.xm}"; /* 姓名 */
        var first_fv = "${requestScope.V_XS_DYC.fv}"; /* 图书馆 */
        var first_vjgg = "${requestScope.V_XS_DYC.vjgg}"; /* 嘉庚图书馆 */
        var first_vygg = "${requestScope.V_XS_DYC.vygg}"; /* 延奎图书馆 */
        var first_rxxn = "${requestScope.V_XS_DYC.rxxn}"; /* 入学学年 */
        var first_xfje = "${requestScope.V_XS_DYC.xfje}"; /* 消费金额 */
        var first_xfsj = "${requestScope.V_XS_DYC.xfsj}"; /* 消费时间 */
        var first_xffs = "${requestScope.V_XS_DYC.xffs}"; /* 消费方式 */
        var first_xfdd = "${requestScope.V_XS_DYC.xfdd}"; /* 消费地点 */
        var first_sjmc = "${requestScope.V_XS_DYC.sjmc}"; /* 书籍名称 */
        var first_jcrq = "${requestScope.V_XS_DYC.jcrq}"; /* 借出日期 */
        var first_tsdd = "${requestScope.V_XS_DYC.tsdd}"; /* 图书地点 */
        var first_gkkm = "${requestScope.V_XS_DYC.gkkm}"; /* 挂科科目 */
        var first_gkxq = "${requestScope.V_XS_DYC.gkxq}"; /* 挂科学期 */
        var first_gkfs = "${requestScope.V_XS_DYC.gkfs}"; /* 挂科分数 */
        var first_zxjmc = "${requestScope.V_XS_DYC.zxjmc}"; /* 助学金名称 */
        var first_zxjje = "${requestScope.V_XS_DYC.zxjje}"; /* 助学金金额 */
        var first_zxjpdxn = "${requestScope.V_XS_DYC.zxjpdxn}"; /* 助学金评定学年 */
        var first_zxjpdxq = "${requestScope.V_XS_DYC.zxjpdxq}"; /* 助学金评定学期 */
    </script>
    <script src="assets/js/index.js"></script>
    <script src="assets/js/indexaboutmui.js"></script>
</body>

</html>